<template>
	<div>
		<el-button class="margin-bottom20" @click="clickReturn">返回</el-button>
		<el-tabs v-model="activeName" @tab-click="handleClick" class="tlTabs">
			<el-tab-pane label="基础信息" name="first">
				<el-form ref="firstForm" :model="form" label-width="100px" :rules="firstRules" key="first">
					<el-form-item label="商品名称:" prop="name">
						<el-input class="width400" v-model="form.name" placeholder="请输入商品名称"></el-input>
					</el-form-item>
					<el-form-item label="商品类目" prop="type">
						<el-select v-model="form.type" value-key="name" placeholder="请选择商品类目" class="width400" @change="typeChange"
							clearable>
							<el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="所属分类" prop="categoryId">
						<el-select v-model="form.categoryId" placeholder="请选择所属分类" class="width400">
							<el-option v-for="(item,index) in categoryList" :key="item.id" :label="item.name"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品描述1:">
						<el-input class="width400" v-model="form.remark1" placeholder="请输入商品描述1"></el-input>
					</el-form-item>
					<el-form-item label="商品描述2:">
						<el-input class="width400" v-model="form.remark2" placeholder="请输入商品描述2"></el-input>
					</el-form-item>
					<el-form-item label="商品提示:">
						<div class="row-me row-center flex-wrap">
							<el-input class="width400" v-model="form.tips" placeholder="请输入商品提示"></el-input>
							<el-image fit='scale-down' v-if="form.tipsIcon" class="width50 height50 margin-right10 margin-left10"
								:src="form.tipsIcon" :preview-src-list="[form.tipsIcon]"></el-image>
							<el-button type="text" @click="clickImg(1)">上传提示图标</el-button>
						</div>
					</el-form-item>
					<el-form-item label="所属区域" prop="area">
						<el-cascader :props="props" v-model="form.area" :options="areaData" @change="areaChange" placeholder="请选择地区"
							class="width400"></el-cascader>
					</el-form-item>
					<el-form-item label="报考类型" prop="targetId">
						<el-select v-model="form.targetId" placeholder="请选择报考类型" class="width400">
							<el-option v-for="(item,index) in studyGuideList" :key="item.id" :label="item.name"
								:value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品标签">
						<el-select v-model="form.tag" filterable allow-create default-first-option multiple placeholder="请输入商品标签"
							class="width400">
						</el-select>
					</el-form-item>
					<el-form-item label="讲师设置:">
						<el-select v-model="form.teacherIds" multiple placeholder="请输入选择讲师" class="width400">
							<el-option :label="item.name" v-for="(item,index) in allTeaherArr" :key="item.id" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="上传图片" prop="picture">
						<div v-if="form.picture" class="row-me">
							<el-image fit="scale-down" class="width60 height60 margin-right10" :src="form.picture"
								:preview-src-list="[form.picture]"></el-image>
						</div>
						<el-button @click="clickImg(2)" type="text">上传图片</el-button>
					</el-form-item>
				</el-form>
				<el-button type="primary" @click="nextStep()">下一步</el-button>
			</el-tab-pane>
			<el-tab-pane label="参数设置" name="second">
				<el-form ref="secondForm" :model="form" label-width="120px" :rules="secondRules" key="second">
					<el-form-item label="销售方式:" prop="saleType">
						<el-radio-group v-model="form.saleType" @change="saleChange">
							<el-radio :label="1" v-if="form.type==1">免费</el-radio>
							<el-radio :label="3">付费商品</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="商品规格:" prop="specification">
						<el-radio-group v-model="form.specification" @change="specChange">
							<el-radio :label="1">默认规格</el-radio>
							<el-radio :label="2" v-if="form.saleType==3">多规格</el-radio>
						</el-radio-group>
					</el-form-item>
					<div class="row-me">
						<div class="width100">
							<div v-if="form.specification==2" style="text-align: right;">
								<i class="el-icon-circle-plus-outline font-size18 pointer" @click="addTab()"></i>
								<i class="el-icon-remove-outline font-size18 margin-left10 margin-right10 pointer"
									@click="reduceTab()"></i>
							</div>
						</div>
						<el-table :data="form.items" border @cell-click="cellClick" :row-class-name="rowClassName"
							:cell-class-name="cellClassName">
							<el-table-column prop="items" label="规格名称" align="center">
								<template slot-scope="{row,column}">
									<el-input placeholder="输入规格名称" @blur="addText(row,row.$index)" v-model="row.name" class="tabIpt"
										v-if="row.index == rowIndex && column.index == columnIndex">
									</el-input>
									<el-input v-else-if="row.name==null||row.name==''" placeholder="输入规格名称" class="tabIpt"></el-input>
									<div class="" v-else>
										<span>{{row.name}}</span>
										<i class="el-icon-edit margin-left5 pointer"></i>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="name" label="售价" align="center">
								<template slot-scope="{row,column}">
									<el-input placeholder="输入价格" @blur="addText(row,row.$index)" v-model="row.price" class="tabIpt"
										v-if="row.index == rowIndex && column.index == columnIndex"
										@input="row.price=$.checkInput(row.price,2)">
									</el-input>
									<el-input v-else-if="row.price==null||row.price==''" placeholder="输入价格" class="tabIpt"></el-input>
									<div class="" v-else>
										<span>{{row.price}}</span>
										<i class="el-icon-edit"></i>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="address" label="库存" align="center">
								<template slot-scope="{row,column}">
									<el-input placeholder="输入库存数量" class="tabIpt" @blur="addText(row,row.$index)" v-model="row.storeCount"
										@input="row.storeCount = $.checkInput(row.storeCount,0)"
										v-if="row.index == rowIndex && column.index == columnIndex">
									</el-input>
									<el-input v-else-if="row.storeCount==null||row.storeCount==''" placeholder="输入库存数量" class="tabIpt">
									</el-input>
									<div class="" v-else>
										<span>{{row.storeCount}}</span>
										<i class="el-icon-edit"></i>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="address" label="限购" align="center" v-if="form.type!=1">
								<template slot-scope="{row,column}">
									<el-input placeholder="输入限购数量" class="tabIpt" @blur="addText(row,row.$index)" v-model="row.limitCount"
										@input="row.limitCount = $.checkInput(row.limitCount,0)"
										v-if="row.index == rowIndex && column.index == columnIndex">
									</el-input>
									<el-input v-else-if="row.limitCount==null||row.limitCount==''" placeholder="输入限购数量" class="tabIpt">
									</el-input>
									<div class="" v-else>
										<span>{{row.limitCount}}</span>
										<i class="el-icon-edit"></i>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="address" label="虚拟销量" align="center">
								<template slot-scope="{row,column}">
									<el-input placeholder="输入销量" type="number" class="tabIpt" @blur="addText(row,row.$index)"
										v-model="row.virtualCount" v-if="row.index == rowIndex && column.index == columnIndex">
									</el-input>
									<el-input v-else-if="row.virtualCount==null||row.virtualCount==''" placeholder="输入销量"
										class="tabIpt"></el-input>
									<div class="" v-else>
										<span>{{row.virtualCount}}</span>
										<i class="el-icon-edit"></i>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="address" label="自增区间" align="center">
								<template slot-scope="{row,column}">
									<div class="row-me center-all" v-if="row.index == rowIndex && column.index == columnIndex">
										<el-input placeholder="请输入" type="number" class="flex1" v-model="row.minAdd">
										</el-input><span class="margin-left10 margin-right10">~</span>
										<el-input placeholder="请输入" type="number" class="flex1" v-model="row.maxAdd"
											@blur="addText(row,row.$index)">
										</el-input>
									</div>
									<div v-else-if="$.isEmpty(row.minAdd)&&$.isEmpty(row.maxAdd)" class="row-me center-all">
										<el-input placeholder="请输入" class="flex1"></el-input><span
											class="margin-left10 margin-right10">~</span>
										<el-input placeholder="请输入" class="flex1"></el-input>
									</div>
									<div class="" v-else>
										<span>{{row.minAdd}} ~ {{row.maxAdd}}</span>
										<i class="el-icon-edit"></i>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="addType" label="自增时段" align="center">
								<template slot-scope="{row,column}">
									<el-select placeholder="请选择" @change="addText(row,row.$index)" v-model="row.addType"
										v-if="row.index == rowIndex && column.index == columnIndex">
										<el-option label="30分钟" :value="1"></el-option>
										<el-option label="1小时" :value="2"></el-option>
										<el-option label="每天" :value="3"></el-option>
									</el-select>
									<el-select v-else-if="row.addType==null||row.addType==''" placeholder="请选择" v-model="row.addType">
										<el-option label="30分钟" :value="1"></el-option>
										<el-option label="1小时" :value="2"></el-option>
										<el-option label="每天" :value="3"></el-option>
									</el-select>
									<div v-else>
										<el-select placeholder="请选择" v-model="row.addType">
											<el-option label="30分钟" :value="1"></el-option>
											<el-option label="1小时" :value="2"></el-option>
											<el-option label="每天" :value="3"></el-option>
										</el-select>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="默认勾选" align="center" width="80">
								<template slot-scope="scope">
									<el-radio v-model="scope.row.isDefault" :label="true"
										@change="defaultChange(scope.row)">{{''}}</el-radio>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<el-form-item label="限时优惠:" class="margin-top20">
						<el-checkbox v-model="form.isPreferential">开启限时优惠</el-checkbox>
						<div v-if="form.isPreferential">
							<el-date-picker v-model="form.dateTime" @change="dateChange" type="datetimerange" range-separator="至"
								start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
								class="margin-left20">
							</el-date-picker>
						</div>
					</el-form-item>
					<el-form-item label="赠送产品:" class="margin-top20">
						<div class="row-me row-center">
							<el-checkbox label="优惠券" v-model="form.isCoupon"></el-checkbox>
							<el-select class="margin-left20" v-if="form.isCoupon" v-model="form.preferentialId" filterable
								placeholder="请选择优惠券">
								<el-option v-for="(item,index) in preferentialArr" :key="index" :label="item.name"
									:value="item.id"></el-option>
							</el-select>
						</div>
					</el-form-item>
					<el-form-item label="邀请码设置">
						<el-radio v-model="form.spread" :label="false">关闭</el-radio>
						<el-radio v-model="form.spread" :label="true">开启</el-radio>
						<el-input type="text" class="width350" v-model="form.spreadDiscount" placeholder="请输入开启邀请码后优惠金额"
							v-if="form.spread"></el-input>
					</el-form-item>
					<el-form-item label="销量设置">
						<el-radio v-model="form.stockType" :label="1">实际销量+虚拟销量</el-radio>
						<el-radio v-model="form.stockType" :label="2">剩余库存</el-radio>
					</el-form-item>
					<div class="row-me row-center">
						<el-form-item label="相关商品设置">
							<el-select v-model="form.configIds" multiple filterable placeholder="请选择" class="width500"
								:multiple-limit="configNum" @change="configChange" :disabled="configNum==0?true:false">
								<el-option v-for="item in productData" :key="item.id" :label="item.name" :value="item.id+''">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="相关专题设置">
							<el-select v-model="form.subjectIds" multiple filterable placeholder="请选择" class="width500"
								:multiple-limit="subjectNum" @change="configChange" :disabled="subjectNum==0?true:false">
								<el-option v-for="item in subjectAll" :key="item.id" :label="item.name" :value="item.id+''">
								</el-option>
							</el-select>
						</el-form-item>
					</div>
					<el-form-item label="收货地址状态" prop="needAddress">
						<el-radio v-model="form.needAddress" :label="false">关闭</el-radio>
						<el-radio v-model="form.needAddress" :label="true">开启</el-radio>
					</el-form-item>
					<el-form-item label="佣金设置" prop="rewardType">
						<el-radio v-model="form.rewardType" :label="2">按比例</el-radio>
						<el-radio v-model="form.rewardType" :label="1">按金额</el-radio>
						<div>
							<el-input v-if="form.rewardType==1" type="number" placeholder="请输入" v-model="form.rewardValue"
								class="width300">
								<template slot="append">元</template>
							</el-input>
							<el-input v-if="form.rewardType==2" type="number" placeholder="请输入" v-model="form.rewardValue"
								class="width300">
								<template slot="append">%</template>
							</el-input>
						</div>
					</el-form-item>
				</el-form>
				<el-button @click="previousStep()">上一步</el-button>
				<el-button type="primary" @click="nextStep()">下一步</el-button>
			</el-tab-pane>
			<el-tab-pane label="商品详情" name="third">
				<el-form :model="form" label-width="100px" key="third">
					<el-form-item label="商品详情:">
						<vue-ueditor-wrap v-model="form.content" editor-id="editor1" :config="editorConfig"
							:editorDependencies="['ueditor.config.js','ueditor.all.js']" />
					</el-form-item>
				</el-form>
				<el-button @click="previousStep()">上一步</el-button>
				<el-button type="primary" @click="handleSave" v-if="form.type!=1">确认提交</el-button>
				<el-button type="primary" @click="nextStep()" v-else>下一步</el-button>
			</el-tab-pane>
			<el-tab-pane label="课程信息" name="fourth" v-if="form.type==1" key="fourth">
				<el-form :model="form" label-width="100px">
					<el-form-item label="课程周期:" class="margin-top20">
						<el-input type="text" placeholder="请输入课程周期" v-model="form.courseTime" class="width400">
						</el-input>
					</el-form-item>
					<el-form-item label="课程有效期:" class="margin-top20">
						<el-radio-group v-model="form.courseValidation">
							<el-radio :label="1">长期有效</el-radio>
							<el-radio :label="2">自定义时长</el-radio>
							<el-radio :label="3">固定时间</el-radio>
						</el-radio-group>
						<div v-if="form.courseValidation==2" class="row-me width400">
							<el-input v-model="form.courseValidationDays" type="number" placeholder="请输入时长"></el-input> <span
								class="margin-left10">天</span>
						</div>
						<div v-if="form.courseValidation==3">
							<el-date-picker v-model="form.courseValidationDay" type="date" placeholder="选择日期"
								value-format="yyyy-MM-dd HH:mm:ss" style="width: 400px;">
							</el-date-picker>
						</div>
					</el-form-item>
					<el-form-item label="课节设置:" class="margin-top20">
						<el-button type="text" @click="addCourse">添加课节</el-button>
						<el-table :data="courseData" border default-expand-all row-key="id"
							:tree-props="{children: 'child', hasChildren: 'hasChildren'}">
							<el-table-column prop="title" label="课节名称" align="center">
								<template slot-scope="scope">
									<el-input v-model="scope.row.title" placeholder="请输入课节名称" class="width80Per">
									</el-input>
								</template>
							</el-table-column>
							<el-table-column prop="type" label="类型" align="center" width="100">
								<template slot-scope="scope">
									<el-select v-model="scope.row.type" placeholder="请选择" class="tabIpt">
										<el-option :value="1" label="课程"> </el-option>
										<el-option :value="2" label="讲义"> </el-option>
									</el-select>
								</template>
							</el-table-column>
							<el-table-column prop="videoUrl" label="课程链接/讲义" align="center">
								<template slot-scope="scope">
									<div class="row-me row-center flex-wrap">
										<div class="flex1 margin-right10">
											<el-input v-if="scope.row.description" v-model="scope.row.description" placeholder="请输入课程链接">
											</el-input>
											<el-input v-model="scope.row.videoUrl" placeholder="请输入课程链接" v-else>
											</el-input>
										</div>
										<div class="row-me row-center">
											<singleUploadLocal isAnnouncement v-if="scope.row.type==2" :showFile="false"
												@input="(val)=>getFile(val,scope.row)" :value="fileFile" isFile message="">
											</singleUploadLocal>
											<el-button type="text" @click="[videoVisible=true,courseRow=scope.row]">选择视频
											</el-button>
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="duration" label="时长" align="center" width="100">
								<template slot-scope="scope">
									<el-input v-model="scope.row.duration" type="number" placeholder="请输入"></el-input>
								</template>
							</el-table-column>
							<el-table-column label="是否免费" align="center" width="100">
								<template slot-scope="scope">
									<el-switch v-model="scope.row.isTry"></el-switch>
								</template>
							</el-table-column>
							<el-table-column label="操作" align="center" width="140" fixed="right">
								<template slot-scope="scope">
									<el-button type="text" size="small" v-if="scope.row.parentId==0"
										@click="addChildCourse(scope.row,scope.$index)">添加子课节
									</el-button>
									<el-button type="text" size="small" @click="clickDel(scope.row,scope.$index)">删除
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-form-item>
				</el-form>
				<el-button @click="previousStep()">上一步</el-button>
				<el-button type="primary" @click="handleSave">确认提交</el-button>
			</el-tab-pane>
		</el-tabs>

		<!-- 选择视频 -->
		<el-dialog title="选择视频" :visible.sync="videoVisible" width="60%">
			<el-form :model="videoQuery" inline>
				<el-form-item>
					<el-select v-model="videoQuery.sort" placeholder="请选择视频分类" class="width260">
						<el-option v-for="point in sortList" :key="point.id" :label="point.name" :value="point.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input placeholder="请输入视频标题" class="width260" v-model="videoQuery.title"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch">搜索</el-button>
					<el-button @click="handleRefresh">重置</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="videoTableData" ref="myTable" border class="margin-top20"
				header-cell-class-name="table-header-style" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column label="缩略图" width="200">
					<template slot-scope="scope">
						<el-image style="max-height: 50px; max-width: 50px; width: auto" class="table-td-thumb"
							:src="scope.row.thumbnail" :preview-src-list="[scope.row.thumbnail]"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="title" label="视频信息" :show-overflow-tooltip="true">
				</el-table-column>
				<el-table-column prop="duration" label="视频时长" align="center"></el-table-column>
				<el-table-column label="视频分类" align="center" width="200" prop="sortName"></el-table-column>
				<el-table-column prop="url" label="视频地址" align="center" width="100">
					<template slot-scope="scope">
						<a :href="scope.row.url" target="_blank" class="blue-text">点击查看</a>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="videoQuery.pageNumber"
					:page-sizes="[30, 40, 50, 60]" @size-change="handleSizeChange" :page-size="videoQuery.pageSize"
					:total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
			<span slot="footer">
				<el-button @click="videoVisible=false">取 消</el-button>
				<el-button type="primary" @click="handleVideoSave">确 认</el-button>
			</span>
		</el-dialog>

		<imgLibrary ref="imgLibrary" @handleImgOk="handleImgOk"></imgLibrary>
	</div>
</template>

<script>
	import imgLibrary from "@/components/imgLibrary"
	import singleUploadLocal from "@/components/Upload/singleUploadLocal"
	export default {
		components: {
			imgLibrary,
			singleUploadLocal
		},
		data() {
			let that = this
			const validateOrg = (rule, value, callback) => {
				if (!this.form.area || !this.form.area.length) {
					callback(new Error('所属区域不能为空'))
				} else {
					callback()
				}
			}
			return {
				videoQuery: {
					pageNumber: 1,
					pageSize: 30
				},
				areaData: [],
				props: {
					value: 'id',
					label: 'name',
					checkStrictly: true,
					multiple: true
				},
				categoryList: [],
				studyGuideList: [],
				allTeaherArr: [],
				imgIndex: 0,
				firstRules: {
					name: {
						required: true,
						message: '请输入商品名称',
						trigger: 'blur'
					},
					type: {
						required: true,
						message: '请选择商品类目',
						trigger: 'change'
					},
					categoryId: {
						required: true,
						message: '请选择所属分类',
						trigger: 'change'
					},
					area: [{
						type: 'array',
						required: true,
						validator: validateOrg
					}],
					targetId: {
						required: true,
						message: '请选择报考类型',
						trigger: 'change'
					},
					picture: {
						required: true,
						message: '请上传图片',
						trigger: 'change'
					}
				},
				secondRules: {
					saleType: {
						required: true,
						message: '请选择销售方式',
						trigger: 'change'
					},
					specification: {
						required: true,
						message: '请选择商品规格',
						trigger: 'change'
					},
					needAddress: {
						required: true,
						message: '请选择收货地址状态',
						trigger: 'change'
					},
					rewardType: {
						required: true,
						message: '请设置佣金',
						trigger: 'change'
					}
				},
				tabIndex: 0,
				activeName: 'first',
				form: {},
				rowIndex: -1,
				columnIndex: -1,
				preferentialArr: [],
				editorConfig: {
					serverUrl: process.env.BASE_API + "/file/upload",
					UEDITOR_HOME_URL: '/static/UEditor/',
					toolbarCallback: function(cmd, editor) {
						switch (cmd) {
							case 'insertimage':
								that.imgIndex = 3
								that.$refs.imgLibrary.show()
								return true;
						}
					}
				},
				courseData: [],
				info: {},
				typeList: [{
						id: 1,
						name: '课程商品'
					},
					{
						id: 2,
						name: '图书商品'
					}
				],
				videoVisible: false,
				sortList: [],
				videoTableData: [],
				pageTotal: 0,
				multipleSelection: [],
				treeId: 1,
				fileFile: [],
				courseRow: {},
				itemsCopy: [],
				productData: [],
				subjectAll: [],
				configNum: 0,
				subjectNum: 0
			}
		},
		mounted() {
			this.getAllArea()
			this.getAllCategory()
			this.studyGuideLeve()
			this.selectAllTeacher()
			this.preferential()
			this.getSort()
			this.getVideoData()
			this.getPageProduct()
			this.getProduceData()
		},
		methods: {
			//相关商品设置
			configChange(val) {
				this.subjectNum = 4 - this.form.configIds.length
				this.configNum = 4 - this.form.subjectIds.length
			},
			//获取专题下拉
			async getPageProduct() {
				const res = await this.$get('/admin/specialSubject/pageSubject', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.subjectAll = res.data.list
				}
			},
			//获取商品下拉
			async getProduceData() {
				const res = await this.$get('/admin/mall/pageProduct', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.productData = res.data.list
				}
			},
			typeChange(val) {
				if (val == 2) {
					this.form.saleType = 3
				}
				this.$forceUpdate()
			},
			specChange(val) {
				if (val == 1) {
					if (this.form.items && this.form.items.length != 0) {
						this.itemsCopy = this.form.items
						this.form.items = [this.form.items[0]]
					}
				} else {
					if (this.itemsCopy.length != 0) {
						this.form.items = this.itemsCopy
					}
				}
			},
			saleChange(val) {
				if (val == 1) {
					if (this.form.specification == 2) {
						if (this.form.items && this.form.items.length > 1) {
							this.itemsCopy = this.form.items
							this.form.items = [{
								edit: true,
								index: 0,
								isDefault: false
							}]
						}
					}
					this.$set(this.form, 'specification', 1)
				} else if (val == 3) {
					if (this.form.specification == 2) {
						this.form.items = this.itemsCopy
					}
				}
			},
			defaultChange(row) {
				for (let item of this.form.items) {
					this.$set(item, 'isDefault', false)
				}
				this.$set(row, 'isDefault', true)
			},
			getFile(data, row) {
				this.courseRow = row
				if (data && data.length != 0) {
					let val = data[data.length - 1]
					for (let item of this.courseData) {
						if (item.id == this.courseRow.id) {
							this.$set(item, 'videoUrl', val.url)
							this.$set(item, 'description', val.name)
						} else {
							if (item.child) {
								for (let item2 of item.child) {
									if (item2.id == this.courseRow.id) {
										this.$set(item2, 'videoUrl', val.url)
										this.$set(item2, 'description', val.name)
									}
								}
							} else {
								item.child = []
							}
						}
					}
				}
				console.log(this.courseData, "this.courseData")
			},
			// 上一步
			previousStep() {
				switch (Number(this.tabIndex)) {
					case 1:
						this.activeName = "first";
						break;
					case 2:
						this.activeName = "second";
						break;
					case 3:
						this.activeName = "third";
						break;
				}
				this.tabIndex = Number(this.tabIndex - 1)
			},
			handleSelectionChange(val) {
				if (val.length > 1) {
					this.$refs.myTable.clearSelection();
					this.$refs.myTable.toggleRowSelection(val.pop());
				}
				if (val.length != 0) {
					this.multipleSelection = val[val.length - 1];
				}
			},
			handlePageChange(val) {
				this.videoQuery.pageNumber = val
				this.getVideoData();
			},
			handleSizeChange(val) {
				this.videoQuery.pageSize = val
				this.getVideoData();
			},
			async getVideoData() {
				this.videoQuery.status = 1
				this.videoQuery.videoType = 2
				const res = await this.$get('/admin/questionVideo/getVideo', this.videoQuery)
				if (res.code == 1000) {
					this.videoTableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			handleSearch() {
				this.videoQuery.pageNumber = 1
				this.getVideoData();
			},
			handleRefresh() {
				this.videoQuery = {
					pageNumber: 1,
					pageSize: 30
				}
				this.getVideoData();
			},
			//获取视频分类
			async getSort() {
				const res = await this.$get('/admin/questionVideo/getVideoSort', {
					pageNumber: 1,
					pageSize: 9999,
					type: 2
				})
				if (res.code == 1000) {
					this.sortList = res.data.list
				}
			},
			handleVideoSave() {
				for (let item of this.courseData) {
					if (item.id == this.courseRow.id) {
						this.$set(item, 'videoUrl', this.multipleSelection.url)
						this.$set(item, 'description', this.multipleSelection.title)
						this.$set(item, 'duration', this.multipleSelection.duration)
					} else {
						if (item.child) {
							for (let item2 of item.child) {
								if (item2.id == this.courseRow.id) {
									this.$set(item2, 'videoUrl', this.multipleSelection.url)
									this.$set(item2, 'description', this.multipleSelection.title)
									this.$set(item2, 'duration', this.multipleSelection.duration)
								}
							}
						} else {
							item.child = []
						}
					}
				}
				this.videoVisible = false
				this.$refs.myTable.clearSelection();
			},
			areaChange(val) {
				this.form.province = []
				this.form.city = []
				if (val.length != 0) {
					for (let item of val) {
						if (item[0]) {
							this.form.province.push(item[0])
						}
						if (item[1]) {
							this.form.city.push(item[1])
						}
					}
				}
				this.form.showCity = JSON.stringify(val)
				this.form.province = [...new Set(this.form.province)].toString()
				this.form.city = [...new Set(this.form.city)].toString()
			},
			clickReturn() {
				this.$emit('handleOk')
			},
			show(row) {
				if (row.id) {
					this.getDetail(row.id)
				} else {
					this.form = {
						items: [{
							edit: true
						}]
					}
				}
			},
			async getDetail(id) {
				const res = await this.$get('/admin/mall/getProductDetail', {
					id
				})
				if (res.code == 1000) {
					this.form = res.data
					if (this.form.items && this.form.items.length != 0 && this.form.items.length != 1) {
						this.$set(this.form, 'specification', 2)
					} else {
						this.$set(this.form, 'specification', 1)
					}
					this.form.tag = this.form.tag ? this.form.tag.split(',') : [];
					this.form.configIds = this.form.configIds ? this.form.configIds.split(',') : [];
					this.form.subjectIds = this.form.subjectIds ? this.form.subjectIds.split(',') : [];
					this.configChange()
					this.courseData = this.form.mallLessons || []
					if (this.form.teachers && this.form.teachers.length != 0) {
						this.form.teacherIds = Array.from(this.form.teachers, ({
							id
						}) => id)
					}
					if (this.form.startTime && this.form.endTime) {
						this.$set(this.form, 'dateTime', [this.form.startTime, this.form.endTime])
					}
					let isCoupon = this.form.preferentialId ? true : false
					this.$set(this.form, 'isCoupon', isCoupon)
					this.form.area = this.form.showCity ? JSON.parse(this.form.showCity) : []
				}
			},
			async handleSave() {
				if (this.form.id) {
					for (let item of this.courseData) {
						if (this.$.isEmpty(item.productId)) {
							delete item.id
						}
						if (item.child && item.child != 0) {
							for (let item2 of item.child) {
								if (this.$.isEmpty(item2.productId)) {
									delete item2.id
								}
							}
						}
					}
					this.form.mallLessons = this.courseData
				} else {
					for (let item of this.courseData) {
						delete item.id
						if (item.child && item.child != 0) {
							for (let item2 of item.child) {
								delete item2.id
							}
						}
					}
					this.form.mallLessons = this.courseData
				}
				this.form.tag = this.form.tag ? this.form.tag.toString() : '';
				this.form.configIds = this.form.configIds ? this.form.configIds.toString() : ''
				this.form.subjectIds = this.form.subjectIds ? this.form.subjectIds.toString() : ''
				const res = await this.$post('/admin/mall/addProduct', this.form)
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.clickReturn()
				}
			},
			clickDel(row, ind) {
				for (let index in this.courseData) {
					if (row.parentId == 0) {
						if (row.id == this.courseData[index].id) {
							this.courseData.splice(index, 1)
							return
						}
					} else if (this.courseData[index].child) {
						for (let i in this.courseData[index].child) {
							if (this.courseData[index].child[i].id == row.id) {
								this.courseData[index].child.splice(i, 1)
							}
						}
					}
				}
			},
			addChildCourse(row) {
				let index = 0
				for (let i in this.courseData) {
					if (this.courseData[i].id == row.id) {
						index = i
					}
				}
				let childId = this.treeId++
				if (!Array.isArray(this.courseData[index].child)) {
					this.$set(this.courseData[index], 'child', [])
				}
				this.courseData[index].child.push({
					id: childId * 10,
					type: 1
				})
			},
			addCourse() {
				this.courseData.push({
					id: this.treeId++,
					parentId: 0,
					type: 1
				})
			},
			// 营销设置优惠券下拉框
			async preferential() {
				const res = await this.$get('/admin/mall/getPreferentiaList')
				this.preferentialArr = res.data
			},
			dateChange(date) {
				if (this.tabIndex == 3) {
					this.$set(this.form, 'courseStartTime', date[0])
					this.$set(this.form, 'courseEndTime', date[1])
				} else if (this.tabIndex == 1) {
					this.$set(this.form, 'startTime', date[1])
					this.$set(this.form, 'endTime', date[1])
				}
			},
			addText(row, index) {
				this.$forceUpdate()
				this.rowIndex = -1
				this.columnIndex = -1
			},
			cellClick(row, column) {
				this.rowIndex = row.index
				this.columnIndex = column.index
			},
			rowClassName({
				row,
				rowIndex
			}) {
				row.index = rowIndex
			},
			cellClassName({
				column,
				columnIndex
			}) {
				column.index = columnIndex
			},
			addTab() {
				this.form.items.push({
					edit: true,
					isDefault: false
				})
			},
			reduceTab() {
				if (this.form.items.length == 1) return
				this.form.items.pop()
			},
			handleClick(tab, event) {
				this.tabIndex = tab.index
			},
			//下一步
			nextStep() {
				if (this.tabIndex == 0) {
					this.$refs.firstForm.validate(valid => {
						if (valid) {
							this.activeName = "second";
							this.tabIndex++
						} else {
							return false;
						}
					})
				} else if (this.tabIndex == 1) {
					this.$refs.secondForm.validate(valid => {
						if (valid) {
							for (let item of this.form.items) {
								if (!this.$.isEmpty(item.minAdd)) {
									if (this.$.isEmpty(item.maxAdd)) {
										this.$message.warning('请补全商品规格自增区间!')
										return
									}
								}
								if (!this.$.isEmpty(item.maxAdd)) {
									if (this.$.isEmpty(item.minAdd)) {
										this.$message.warning('请补全商品规格自增区间!')
										return
									}
								}
							}
							this.activeName = "third";
							this.tabIndex++
						} else {
							return false;
						}
					})
				} else if (this.tabIndex == 2) {
					this.activeName = "fourth";
					this.tabIndex++
				}
			},
			//点击图片库
			clickImg(index) {
				this.imgIndex = index
				this.$refs.imgLibrary.show()
			},
			handleImgOk(data) {
				if (this.imgIndex == 1) {
					this.$set(this.form, 'tipsIcon', data)
				} else if (this.imgIndex == 2) {
					this.$set(this.form, 'picture', data)
				} else if (this.imgIndex == 3) {
					this.form.content = this.form.content + `<img src='${data}'>`
				}
			},
			// 讲师设置的下拉框
			async selectAllTeacher() {
				const res = await this.$get('/admin/mall/getAllTeacher')
				this.allTeaherArr = res.data
			},
			// 商品分类下拉
			async getAllCategory() {
				const res = await this.$get('/admin/mall/getAllCategory')
				this.categoryList = res.data
			},
			async studyGuideLeve() {
				const res = await this.$get('/admin/studyGuide/listLevel1')
				this.studyGuideList = res.data
			},
			//获取省市区树
			async getAllArea() {
				const res = await this.$get('/admin/area/getAllArea')
				if (res.code == 1000) {
					this.areaData = res.data
					this.areaData.unshift({
						adcode: '0',
						name: '默认',
						parentId: 0,
						id: '0'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .el-tabs__nav-scroll {
		pointer-events: none !important;
	}
</style>